<template>
  <el-space v-bind="props.spaceProps">
    <el-image
      v-bind="props.imageProps"
      v-for="(item, index) in getImgList"
      :key="index"
      :src="item"
    />
  </el-space>
</template>

<script lang="ts" setup>
  import { computed, PropType } from 'vue';
  import { useGlobSetting } from '@/hooks/setting';
  const props = defineProps({
    imgList: {
      type: Array as PropType<String[]>,
      default: () => [],
    },
    imageProps: {
      type: Object,
      default: () => ({
        width: 50,
      }),
    },
    spaceProps: {
      type: Object,
    },
  });

  const globSetting = useGlobSetting();

  const getImgList = computed(() => {
    return props.imgList.map((item: string) => {
      return fullImgUrl(item);
    });
  });

  //组装完整图片地址
  function fullImgUrl(url: string): string {
    const { imgUrl } = globSetting;
    return /(^http|https:\/\/)/g.test(url) ? url : `${imgUrl}${url}`;
  }

  defineExpose({
    fullImgUrl,
  });
</script>
